<a href="https://terrateam.io" class="site-title sl-flex">
  <img
    alt="Terrateam"
    src="/logo-wordmark.svg"
    width="252"
    height="56"
  />
</a>

<style>
  .site-title {
    align-items: center;
    gap: var(--sl-nav-gap);
    font-size: var(--sl-text-h4);
    font-weight: 600;
    color: var(--sl-color-text-accent);
    text-decoration: none;
    white-space: nowrap;
  }

  img {
    height: calc(var(--sl-nav-height) - 0.8 * var(--sl-nav-pad-y));
    width: auto;
    max-width: 252px;
    max-height: 56px;
    object-fit: contain;
    object-position: 0 50%;
  }
  
  /* Make header slightly taller for the logo */
  :global(header) {
    --sl-nav-height: 4.5rem !important;
  }
</style>
